<template>
  <el-form
    :model="formData"
    label-position="left"
    ref="formRef"
    style="max-width: 800px"
  >
    <transition-group 
      name="edu-list" 
      tag="div"
      style="position: relative;"
    >
      <el-form-item
        v-for="(edu, index) in formData"
        :key="edu.id"
        class="education-item"
        style="position: relative;"
      >
        <el-icon 
          class="delete-icon"
          @click="removeEducation(index)"
        >
          <Close />
        </el-icon>
      <!-- 学校 & 学院 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item 
            label="学校名称"
            :prop="`${index}.school`"
            :rules="[{ required: true, message: '请选择学校', trigger: ['blur','change'] }]">
            <el-autocomplete
              v-model="edu.school"
              :fetch-suggestions="querySchoolSearch"
              placeholder="请输入学校名称"
              clearable
              style="width: 100%"/>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="学院名称">
            <el-input v-model="edu.college" placeholder="请输入学院名称" style="width: 100%"/>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 主修专业 & 学历 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item 
            label="主修专业"
            :prop="`${index}.major`"
            :rules="[{ required: true, message: '请填写专业', trigger: ['blur','change'] }]">
            <el-autocomplete
              v-model="edu.major"
              :fetch-suggestions="queryMajorSearch"
              placeholder="请输入专业名称"
              clearable
              style="width: 100%"/>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item 
            label="学历"
            :prop="`${index}.degree`"
            :rules="[{ required: true, message: '请选择学历', trigger: ['blur','change'] }]">
            <el-select v-model="edu.degree" placeholder="请选择学历" style="width: 100%">
              <el-option
                v-for="item in degreeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 就读时间 -->
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item 
            label="就读时间"
            :prop="`${index}.duration`">
            <el-date-picker
              v-model="edu.duration"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 100%"/>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 成绩类型 & 输入框 -->
      <el-row :gutter="20">
        <el-col :span="16">
          <el-form-item label="成绩排名">
            <el-radio-group v-model="edu.gradeType" style="display:flex; flex-wrap:nowrap">
              <el-radio value="gpa" >GPA</el-radio>
              <el-radio value="score">成绩</el-radio>
              <el-radio value="rank">排名</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="16" style="position:relative;left:50px">
          <el-form-item 
            :prop="`${index}.grade`">
            <el-input 
              v-model="edu.grade" 
              :placeholder="`请输入${edu.gradeType === 'gpa' ? 'GPA' : edu.gradeType === 'score' ? '成绩' : '排名'}`"
              style="width: 100%"/>
          </el-form-item>
        </el-col> 
      </el-row>

      <!-- 主修课程表格 -->
      <el-row :gutter="20">
        <el-col :span="18">
          <el-form-item>
            <el-table :data="edu.courses" >
              <el-table-column prop="name" label="课程名称" width="150">
                <template #default="scope">
                  <el-input v-model="scope.row.name" placeholder="请输入课程名称"/>
                </template>
              </el-table-column>
              <el-table-column prop="score" label="成绩" width="120">
                <template #default="scope">
                  <el-input v-model="scope.row.score" placeholder="请输入成绩"/>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template #default="scope">
                  <el-button type="danger" @click="removeCourse(edu.courses, scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-button type="primary" @click="addCourse(edu.courses)" style="margin-top: 10px">添加课程</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      </el-form-item>
    </transition-group>
    
    <el-form-item style="margin-top: 20px">
      <el-button type="primary" @click="addEducation">添加教育背景</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive,onMounted } from 'vue'
import { Close } from '@element-plus/icons-vue'
import { useResumeStore } from '../../store/resume'

const props = defineProps({
  initialData: {
    type: Object,
    default: () => ([])
  }
})

const resumeStore = useResumeStore()
let uid = 1
const formData = reactive([{
  id: uid++,
  school: '',
  college: '',
  major: '',
  degree: '',
  duration: '',
  gradeType: 'gpa',
  grade: '',
  courses: []
}])

// 初始化表单数据
onMounted(() => {
  // console.log("education表单获取数据：",props.initialData);
  // if(props.initialData.length != 0){
    Object.assign(formData, props.initialData)
  // }
})
const getFormData = () => {
  // console.log("education表单被请求发送数据");

  return Promise.resolve(formData)
}

defineExpose({
  getFormData
})

const degreeOptions = reactive([
  { value: 'bachelor', label: '本科' },
  { value: 'master', label: '硕士' },
  { value: 'phd', label: '博士' },
  { value: 'other', label: '其他' }
])

const querySchoolSearch = (queryString, cb) => {
  // 实现学校搜索逻辑
  cb([])
}

const queryMajorSearch = (queryString, cb) => {
  // 实现专业搜索逻辑
  cb([])
}

const addEducation = () => {
  formData.push({
    id: uid++,
    school: '',
    college: '',
    major: '',
    degree: '',
    duration: '',
    gradeType: 'gpa',
    grade: '',
    courses: []
  })
}

const addCourse = (courses) => {
  courses.push({ name: '', score: '' })
}

const removeCourse = (courses, index) => {
  courses.splice(index, 1)
}

const removeEducation = (index) => {
  formData.splice(index, 1)
}
</script>

<style scoped>
.education-item {
  margin-bottom: 24px;
  padding: 24px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  position: relative;
  transition: all 0.3s ease;
}

.edu-list-move {
  transition: all 0.3s ease;
  z-index: 2;
}

.edu-list-enter-active {
  transition: all 0.3s ease;
}

.edu-list-leave-active {
  transition: all 0.3s ease;
  position: absolute !important;
  width: 100%;
}

.edu-list-enter-from {
  opacity: 0;
  transform: translateY(-20px);
}

.edu-list-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

.edu-list-leave-active {
  position: absolute;
  width: 100%;
}

.delete-icon{
  color: '#F56C6C';
  position: absolute;
  left: -32px;
  top: -32px;
  width: 1.2em;
  height: 1.2em;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  z-index: 1;
}

.delete-icon:hover {
  transform: scale(1.15);
  filter: drop-shadow(0 2px 4px rgba(245, 108, 108, 0.3));
  color: #ff7878;
}

.delete-icon:active {
  transform: scale(0.85);
}

.delete-icon::after {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border-radius: 50%;
  background: rgba(245, 108, 108, 0.1);
  opacity: 1.5;
  transition: opacity 0.2s;
}

.delete-icon:hover::after {
  opacity: 1;
}

.el-form-item {
  margin-bottom: 18px;
}

.el-form-item__label {
  padding-right: 12px;
}
</style>
